<template>
	<view>
		<view class="h2">学生增加</view>
		<view class="form">
			<view class="form-item">
				<label class="form-item__label" for="name">学生姓名</label>
				<view class="form-item__content">
					<input class="input" type="text" maxlength="10" id="name" v-model="formData.name" focus />
				</view>
			</view>
			<view class="form-item">
				<label class="form-item__label">性别</label>
				<view class="form-item__content">
					<radio-group @change="handleSexChange">
						男：<radio value="男"/>
						女：<radio value="女"/>
					</radio-group>
				</view>
			</view>
			<view class="form-item">
				<label class="form-item__label" for="tel">电话号码</label>
				<view class="form-item__content">
					<input class="input" type="tel" maxlength="11" id="tel" v-model="formData.tel" inputmodel="tel" />
				</view>
			</view>
			<view class="form-item">
				<label class="form-item__label">专业</label>
				<view class="form-item__content">
					<picker @change="handleMajorChange" :value="majorIndex" :range="majors">
						<view class="uni-input">{{majors[majorIndex]}}</view>
					</picker>
				</view>
			</view>
			<view class="form-item">
				<button @click="handleSubmit">确认</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>	
	import {ref,reactive} from "vue";
	
	type FormData = {
		name: string,
		tel: string,
		sex: string,
		major: string
	};
	
	const formData = reactive<FormData>({
		name: "",
		tel: "",
		sex: "",
		major: "JAVA",
	});
	
	const majorIndex = ref(0);
	const emits = defineEmits(["update:modelValue"]);
	let id = 100;
	
	
	const majors = [
		"JAVA",
		"WEB"
	]
	
	function handleMajorChange(v) {
		majorIndex.value = v.detail.value;
		formData.major = majors[majorIndex.value];
	}
	
	function handleSexChange(v) {
		formData.sex = v.detail.value;
	}
	
	function handleSubmit() {
		emits("update:modelValue",{...formData,id: id ++})
	}
	

</script>

<style lang="scss" scoped>

</style>
